<!-- Basic Page Needs
================================================== -->
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">

<!-- Mobile Specific Metas
================================================== -->
  <meta name="HandheldFriendly" content="True">
  <meta name="MobileOptimized" content="320">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

<!-- Title and meta description
================================================== -->
{% if page.title %}
  <title>{{ site.name }} | {{ page.title }}</title>
  <meta property="og:title" content="{{ site.name | xml_escape }} | {{ page.title | xml_escape }}" />
{% else %}
  <title>{{ site.name }} | {{ site.title }}</title>
  <meta property="og:title" content="{{ site.name | xml_escape }} | {{ site.title | xml_escape }}" />
{% endif %}

{% if page.description %}
  <meta name="description" content="{{ page.description | xml_escape }}">
  <meta property="og:description" content="{{ page.description | xml_escape }}" />
{% else %}
  <meta name="description" content="{{ site.description | xml_escape }}">
  <meta property="og:description" content="{{ site.description | xml_escape }}" />
{% endif %}

  <link rel="canonical" href="{{ site.url }}{{ page.url }}" />

<!--[if lt IE 9]>
  <script src="{{ site.baseurl }}/assets/js/vendor/html5shiv.js"></script>
<![endif]-->

<!-- Favicons
================================================== -->
  <!-- 128x128 -->
  <link rel="shortcut icon" type="image/ico" href="{{ site.baseurl }}/assets/img/favicons/favicon.ico" />
  <link rel="icon" type="image/png" href="{{ site.baseurl }}/assets/img/favicons/favicon.png" />

  <!-- 192x192, as recommended for Android
  http://updates.html5rocks.com/2014/11/Support-for-theme-color-in-Chrome-39-for-Android
  -->
  <link rel="icon" type="image/png" sizes="192x192" href="{{ site.baseurl }}/assets/img/favicons/favicon-192.png" />

  <!-- 57x57 (precomposed) for iPhone 3GS, pre-2011 iPod Touch and older Android devices -->
  <link rel="apple-touch-icon-precomposed" href="{{ site.baseurl }}/assets/img/favicons/favicon-57.png">
  <!-- 72x72 (precomposed) for 1st generation iPad, iPad 2 and iPad mini -->
  <link rel="apple-touch-icon-precomposed" sizes="72x72" href="{{ site.baseurl }}/assets/img/favicons/favicon-72.png">
  <!-- 114x114 (precomposed) for iPhone 4, 4S, 5 and post-2011 iPod Touch -->
  <link rel="apple-touch-icon-precomposed" sizes="114x114" href="{{ site.baseurl }}/assets/img/favicons/favicon-114.png">
  <!-- 144x144 (precomposed) for iPad 3rd and 4th generation -->
  <link rel="apple-touch-icon-precomposed" sizes="144x144" href="{{ site.baseurl }}/assets/img/favicons/favicon-144.png">

<!-- CSS
================================================== -->
  <link rel="stylesheet" href="{{ "/assets/css/styleguide.css" | prepend: site.baseurl }}">
